<template>
    <div class="Parentbox">
        <div class="bovin">
            <div class="setting">
                <div>
                    <el-card class="classified">
                        <div style="display: flex; justify-content: space-between;">
                            <div style=" display: flex; align-items: center;">
                                <h3 style="margin-left: 20px;">分类信息</h3>
                                <el-button @click="payment" style="margin-left: 20px;" size="mini" type="primary"
                                    plain>货款</el-button>
                                <el-button @click="money" size="mini" type="primary" plain>理财</el-button>
                            </div>
                            <div style=" display: flex; align-items: center;">
                                <el-button type="primary">新增</el-button>
                                <el-button>编辑</el-button>
                                <el-button>取消</el-button>
                                <el-button>删除</el-button>
                                <el-button>保存</el-button>
                                <div
                                    style="margin: 5px 10px 5px 10px;  width: 1px; height: 20px; background-color: #dddfe6;">
                                </div>
                                <el-button style="margin-right: 10px;" type="text"><i class="el-icon-coin"></i></el-button>
                            </div>
                        </div>
                    </el-card>
                </div>
                <!-- 顶部 -->
                <div v-if="showhidden">
                    <div style="display: flex;">
                        <div class="side">
                            <el-table :data="tableData" border style="width: 99%; margin-top: 10px;" stripe>
                                <el-table-column align="center" label="#" type="index">
                                </el-table-column>
                                <el-table-column align="center" label="名称" prop="name">
                                </el-table-column>
                                <el-table-column align="center" label="属性值" prop="address">
                                </el-table-column>
                            </el-table>
                            <div style="display: flex; justify-content: end;">
                                <el-pagination background layout="total, prev, pager,  next, sizes, jumper"
                                    :total="20"></el-pagination>
                            </div>
                        </div>
                        <div style="width: 9px; height: 590px;"></div>
                        <div class="wing">
                            <div style="display: flex;  margin: 20px 10px 10px 10px;;">
                                <span class="verticalbar"></span>
                                <div style="margin-left: 10px; font-size:20px;">基本信息</div>
                            </div>
                            <div>
                                <el-form label-width="160px" :model="ruleForm" :rules="rules">
                                    <el-form-item label="名称" prop="name">
                                        <el-input disabled v-model="ruleForm.name"></el-input>
                                    </el-form-item>
                                    <el-form-item label="备注" prop="region">
                                        <el-input disabled type="textarea" v-model="ruleForm.region"></el-input>
                                    </el-form-item>
                                    <el-form-item label="业务系统编码" prop="date1">
                                        <el-input disabled v-model="ruleForm.date1"></el-input>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <!-- 属性值定义 -->
                            <div>
                                <div style="display: flex; margin: 20px 10px 10px 10px;">
                                    <span class="verticalbar"></span>
                                    <div style="margin-left: 10px; font-size:20px;">属性值定义</div>
                                </div>

                                <div>
                                    <el-table :data="tableData" border size="mini">
                                        <el-table-column type="index" label="#" align="center">
                                        </el-table-column>
                                        <el-table-column label="编码">
                                            <template slot-scope="scope">
                                                <el-input disabled></el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="名称">
                                            <template slot-scope="{row}">
                                                <el-input disabled v-model="row.name"></el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="业务系统编码">
                                            <template slot-scope="scope">
                                                <el-input disabled></el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="排序">
                                            <template slot-scope="{row}">
                                                <el-input disabled v-model="row.date"></el-input>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <div style="display: flex; justify-content: center;">
                                        <el-button type="text">
                                            <i class="el-icon-plus"></i>
                                            新增行</el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 货款 -->
                <div v-else>
                    <div style="display: flex;">
                        <div class="side">
                            <el-table :data="tableData" border style="width: 99%; margin-top: 10px;"
                                :row-class-name="tableRowClassName">
                                <el-table-column align="center" label="#" type="index">
                                </el-table-column>
                                <el-table-column align="center" label="名称" prop="name">
                                </el-table-column>
                                <el-table-column align="center" label="属性值" prop="address">
                                </el-table-column>
                            </el-table>
                            <div style="display: flex; justify-content: end;">
                                <el-pagination background layout="total, prev, pager,  next, sizes, jumper"
                                    :total="20"></el-pagination>
                            </div>

                        </div>
                        <div style="width: 9px; height: 590px;"></div>
                        <div class="wing">
                            <!-- 基本信息 -->
                            <div style="display: flex;  margin: 20px 10px 10px 10px;">
                                <span class="verticalbar"></span>
                                <div style="margin-left: 10px; font-size:20px;">基本信息</div>
                            </div>
                            <div>
                                <el-form label-width="160px" :model="verify" :rules="code">
                                    <el-form-item label="名称" prop="designation">
                                        <el-input disabled v-model="verify.designation"></el-input>
                                    </el-form-item>
                                    <el-form-item label="备注" prop="remark">
                                        <el-input disabled type="textarea" v-model="verify.remark"></el-input>
                                    </el-form-item>
                                    <el-form-item label="业务系统编码" prop="coding">
                                        <el-input disabled v-model="verify.coding"></el-input>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <!-- 属性值定义 -->
                            <div>
                                <div style="display: flex; margin: 20px 10px 10px 10px;">
                                    <span class="verticalbar"></span>
                                    <div style="margin-left: 10px; font-size:20px;">属性值定义</div>
                                </div>

                                <div>
                                    <el-table :data="tableData" border size="mini">
                                        <el-table-column type="index" label="#" align="center">
                                        </el-table-column>
                                        <el-table-column label="编码">
                                            <template slot-scope="scope">
                                                <el-input disabled></el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="名称">
                                            <template slot-scope="{row}">
                                                <el-input disabled v-model="row.name"></el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="业务系统编码">
                                            <template slot-scope="scope">
                                                <el-input disabled></el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="排序">
                                            <template slot-scope="{row}">
                                                <el-input disabled v-model="row.date"></el-input>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <div style="display: flex; justify-content: center;">
                                        <el-button type="text">
                                            <i class="el-icon-plus"></i>
                                            新增行</el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 理财 -->
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            rules: {
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
            },
            code: {
                designation: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
            },
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            showhidden: true,
            ruleForm: {
                name: '融资渠道',
                region: '',
                date1: '',
            },
            verify: {
                designation: '风险平级',
                remark: '',
                coding: '',
            }
        }
    },
    methods: {
        payment() {
            this.showhidden = true
        },
        // 货款
        money() {
            this.showhidden = false
        },
        // 理财
    }
}
</script>

<style lang="less" scoped>
.bovin {
    display: flex;
    justify-content: center;

    .setting {
        width: 1349px;
        height: 737px;
        background-color: #eceef1;

        .classified {
            margin-top: 5px;
            height: 68px;

        }

        .side {
            width: 670px;
            height: 600px;
            margin-top: 5px;
            border-radius: 4px;
            background-color: #fff;
        }

        .wing {
            width: 670px;
            height: 600px;
            margin-top: 5px;
            border-radius: 4px;
            background-color: #fff;

            .verticalbar {
                margin-top: 5px;
                display: inline-block;
                border-radius: 5px;
                width: 5px;
                height: 20px;
                background-color: #2a87ff;
            }
        }
    }
}


/deep/.el-button--mini {
    width: 90px;
    height: 28px;
    border-radius: 0px;
}

/deep/.el-card__body {
    padding: 0px;
}
</style>